<template>
  <div class="projectList">
    <!-- 项目榜单 -->
    <div class="projectStatistics">
      <div class="searchBox">
        <div class="box1">
          <el-select v-model="value1" clearable placeholder="请选择课程">
            <el-option
              v-for="item in projectList"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            >
            </el-option>
          </el-select>
        </div>
        <button @click="searchBtn">查询</button>
      </div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>项目完成情况统计</span>
        </div>
        <div class="bodyBox">
          <div class="projectGroup projectGroup4">
            <div class="topBox">任务完成平均时长</div>
            <el-table
              v-loading="loading"
              :data="averagecompletiontimeoftaskVo.slice(0, 10)"
              :header-cell-style="{
                color: '#333',
                fontWeight: '400',
                fontSize: '14px',
                height: '30px',
                padding: '0',
              }"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column type="index" label="排名" width="80">
              </el-table-column>
              <el-table-column label="项目小组名称">
                <template slot-scope="scope">
                  <span v-if="scope.row.projectgpName">{{
                    scope.row.projectgpName
                  }}</span>
                  <span v-else>未填写名称</span>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="平均时长（分）" width="120">
              </el-table-column>
            </el-table>
          </div>
          <div class="weekBest">
            <div class="topBox">小组/个人最佳情况</div>
            <div class="groupBox" style="height: 43px; line-height: 43px">
              <div class="dotBox"></div>
              <div class="dotText">本周最佳小组</div>
            </div>
            <div class="dotName" v-loading="loading" v-if="bestcaseVo !== null">
              <div class="nameBox">{{ bestcaseVo.projectgpName }}</div>
              <div class="timeBox">
                完成平均时长：{{ bestcaseVo.projectTime }}
              </div>
              <div class="taskBox">
                完成任务数：{{ bestcaseVo.projectCount }}
              </div>
            </div>
            <div class="dotName1" v-loading="loading" v-else>暂无数据</div>
            <div class="personalBox groupBox">
              <div class="dotBox dotBox1"></div>
              <div class="dotText">本周最佳个人</div>
            </div>
            <div class="dotName" v-loading="loading" v-if="bestcaseVo !== null">
              <div class="nameBox">{{ bestcaseVo.userName }}</div>
              <div class="timeBox timeBox1">
                完成平均时长：{{ bestcaseVo.userTime }}
              </div>
              <div class="taskBox taskBox1">
                完成任务数：{{ bestcaseVo.userCount }}
              </div>
            </div>
            <div class="dotName1" v-loading="loading" v-else>暂无数据</div>
          </div>
          <div class="taskQuantity">
            <div class="topBox">项目完成进度</div>
            <div class="canvsBox">
              <topCon
                v-loading="loading"
                :projectcompletionscheduleVoList.sync="
                  projectcompletionscheduleVoList
                "
              ></topCon>
            </div>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix clearfix1">
          <span
            :class="index == isactive ? 'active' : ''"
            @click="handelchange(index)"
            :key="index"
            v-for="(item, index) in tablist"
            >{{ item.name }}
          </span>
        </div>
        <div class="bodyBox">
          <div class="projectGroup projectGroup3">
            <div class="topBox">各小组任务完成数</div>
            <el-table
              v-loading="loading"
              :data="selectProjectList.numberoftaskscompletedVos"
              :header-cell-style="{
                color: '#333',
                fontWeight: '400',
                fontSize: '14px',
                height: '30px',
                padding: '0',
              }"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column type="index" label="排名" width="80">
              </el-table-column>
              <el-table-column label="项目小组名称">
                <template slot-scope="scope">
                  <span v-if="scope.row.projectgpName">{{
                    scope.row.projectgpName
                  }}</span>
                  <span v-else>未填写名称</span>
                </template>
              </el-table-column>
              <el-table-column prop="taskCount" label="任务完成数" width="120">
              </el-table-column>
            </el-table>
          </div>
          <div class="projectGroup projectGroup1">
            <div class="topBox">任务逾期数</div>
            <el-table
              v-loading="loading"
              :data="selectProjectList.overduenumberoftasks"
              :header-cell-style="{
                color: '#333',
                fontWeight: '400',
                fontSize: '14px',
                height: '30px',
                padding: '0',
              }"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column type="index" label="排名" width="80">
              </el-table-column>
              <el-table-column label="项目小组名称">
                <template slot-scope="scope">
                  <span v-if="scope.row.projectgpName">{{
                    scope.row.projectgpName
                  }}</span>
                  <span v-else>未填写名称</span>
                </template>
              </el-table-column>
              <el-table-column prop="taskCount" label="任务逾期数" width="120">
              </el-table-column>
            </el-table>
          </div>
          <div class="projectGroup projectGroup2">
            <div class="topBox">个体任务完成数</div>
            <el-table
              v-loading="loading"
              :data="selectProjectList.personalTaskCount"
              :header-cell-style="{
                color: '#333',
                fontWeight: '400',
                fontSize: '14px',
                height: '30px',
                padding: '0',
              }"
              :row-class-name="tableRowClassName"
              style="width: 100%"
            >
              <el-table-column type="index" label="排名" width="80">
              </el-table-column>
              <el-table-column label="学生姓名">
                <template slot-scope="scope">
                  <span v-if="scope.row.projectgpName">{{
                    scope.row.projectgpName
                  }}</span>
                  <span v-else>未填写名称</span>
                </template>
              </el-table-column>
              <el-table-column prop="taskCount" label="任务完成数" width="120">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import topCon from '@/components/repcard/commonMis/projectStatisticsEarchs/topCon.vue';
import {getSelectProjectList, getSelectProject} from '@/api/repcard/repcard.js';
export default {
  name: 'ProjectStatistics',
  components: {topCon},
  props: {},
  data() {
    return {
      selectProjectList: {}, // 项目榜单数据
      averagecompletiontimeoftaskVo: [], // 任务完成平均时长数据
      bestcaseVo: {}, // 小组/个人最佳情况数据
      projectcompletionscheduleVoList: [], // 项目完成进度数据
      loading: true,
      selectProject: { projectId: null, select: 1 }, // 请求数据
      projectList: [], // 模板项目下拉框数据

      // ----------------------------------------------
      value1: null,
      isactive: 0,
      tablist: [
        {name: '全部'},
        {name: '上周'},
        {name: '上月'}
      ]
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getSelectProject();
    // setTimeout(() => {
    //   this.getSelectProjectList();
    // }, 300);
  },
  methods: {
    // Table 中的某一行添加 class
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 0) {
        return 'color1 color4';
      } else if (rowIndex === 1) {
        return 'color2 color4';
      } else if (rowIndex === 2) {
        return 'color3 color4';
      }
      return 'color4';
    },
    // 查询模板项目下拉框
    async getSelectProject() {
      const {data} = await getSelectProject();
      this.projectList = data;
      // console.log(data);
      if (data.length > 0) {
        this.value1 = data[0].projectId;
        this.selectProject.projectId = this.projectList[0].projectId;
      }
      this.getSelectProjectList();
    },
    // 获取项目榜单数据
    async getSelectProjectList() {
      // console.log(this.projectList);
      const {data} = await getSelectProjectList(this.selectProject);
      this.selectProjectList = data;
      // console.log(this.selectProjectList);
      this.averagecompletiontimeoftaskVo = data.averagecompletiontimeoftaskVo;
      for (let i = 0; i < this.averagecompletiontimeoftaskVo.length; i++) {
        if (this.averagecompletiontimeoftaskVo[i] === null) {
          this.averagecompletiontimeoftaskVo.splice(i, 1);
        }
      }
      this.bestcaseVo = data.bestcaseVo;
      this.projectcompletionscheduleVoList = data.projectcompletionscheduleVoList;
      this.projectcompletionscheduleVoList.forEach(item => {
        if (item.projectgpName === null) {
          item.projectgpName = '未填写名称';
        }
      });
      this.loading = false;
      // console.log(this.averagecompletiontimeoftaskVo);
      // console.log(this.projectcompletionscheduleVoList);
    },
    // 查询按钮事件
    searchBtn() {
      this.loading = true;
      this.isactive = 0;
      // console.log(this.value1);
      this.selectProject.projectId = this.value1;
      this.getSelectProjectList();
    },
    // 筛选事件
    handelchange(index) {
      this.isactive = index;
      // console.log(index);
      if (index === 0) {
        this.selectProject.select = 1;
        this.getSelectProjectList();
      } else if (index === 1) {
        this.selectProject.select = 3;
        this.getSelectProjectList();
      } else if (index === 2) {
        this.selectProject.select = 2;
        this.getSelectProjectList();
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/.el-table::before {
  width: 0;
}
/deep/.el-table__cell {
  padding: 5px 0;
}
.projectStatistics {
  position: relative;
  width: calc(100% - 40px);
  padding: 0 20px;
  overflow: hidden;
  .searchBox {
    width: 850px;
    height: 40px;
    margin-bottom: 22px;
    display: flex;
    margin-top: 10px;
    // justify-content: space-between;
    .box1 {
      position: relative;
      width: 195px;
      font-size: 12px;
    }
    button {
      cursor: pointer;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 25px;
      width: 85px;
      height: 34px;
      background: #2fc0e0;
      border-radius: 4px;
      box-shadow: 0 0 5px #2fc0e0;
      margin-top: 5px;
      margin-left: 20px;
    }
  }
  /deep/.box-card {
    height: 488px;
    margin-bottom: 22px;
    box-shadow: 1px 2px 3px 0px rgba(153, 153, 153, 0.5);
    .el-card__header {
      height: 35px;
      line-height: 35px;
      background: #eaf8fb;
      padding: 0 30px;
      .clearfix {
        font-size: 16px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #2fc0e0;
      }
      .clearfix1 {
        font-weight: 400;
        color: #666;
        span {
          cursor: pointer;
          font-size: 16px;
          margin-right: 14px;
        }
        .active {
          color: #2fc0e0;
        }
      }
    }
    .el-card__body {
      padding: 15px 30px;
      .bodyBox {
        height: 438px;
        display: flex;
        .topBox {
          height: 24px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2fc0e0;
          line-height: 24px;
        }
        .projectGroup {
          width: 33%;
          height: calc(100% - 15px);
          border-right: 1px solid #dddddd;
          box-sizing: border-box;
          padding-right: 30px;
          /deep/tr {
            td {
              .cell {
                font-size: 16px;
                color: #666;
              }
            }
          }
        }
        .projectGroup4 {
          .color4 {
            td:last-child {
              color: #237562;
            }
          }
        }
        .projectGroup3 {
          .color4 {
            td:last-child {
              color: #2c51c9;
            }
          }
        }
        .projectGroup1 {
          padding-left: 30px;
          .color4 {
            td:last-child {
              color: #e94343;
            }
          }
        }
        .projectGroup2 {
          padding-left: 30px;
          padding-right: 0;
          border: none;
          .color4 {
            td:last-child {
              color: #6db706;
            }
          }
        }
        .weekBest {
          width: 20%;
          height: calc(100% - 15px);
          border-right: 1px solid #dddddd;
          box-sizing: border-box;
          padding: 0 30px;
          .groupBox {
            display: flex;
            .dotBox {
              width: 15px;
              height: 15px;
              border-radius: 50%;
              background: #e07f2f;
              margin: auto 5px;
              margin-left: 0;
            }
            .dotBox1 {
              background: #86d717;
            }
            .dotText {
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #666666;
            }
          }
          .dotName {
            margin-left: 18px;
            .nameBox {
              height: 33px;
              font-size: 24px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              line-height: 33px;
            }
            .timeBox {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #e07f2f;
              margin: 5px 0;
              line-height: 22px;
            }
            .timeBox1 {
              color: #86d717;
            }
            .taskBox {
              height: 22px;
              font-size: 16px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #e07f2f;
              line-height: 22px;
            }
            .taskBox1 {
              color: #86d717;
            }
          }
          .dotName1 {
            margin-left: 18px;
            font-size: 14px;
            color: #999;
          }
          .personalBox {
            margin-top: 30px;
            margin-bottom: 10px;
          }
        }
        .taskQuantity {
          width: 47%;
          height: 100%;
          padding-left: 30px;
          box-sizing: border-box;
          .searchBox {
            // width: 850px;
            height: 40px;
            margin-bottom: 20px;
            display: flex;
            margin-top: 10px;
            // justify-content: space-between;
            .box2 {
              margin: 0 12px 0 34px;
              line-height: 40px;
              span {
                cursor: pointer;
                font-size: 16px;
                margin-right: 14px;
              }
              .active {
                color: #2fc0e0;
              }
            }
            .yiBox {
              font-size: 700;
              color: #ccd9f9;
            }
            .box1 {
              position: relative;
              width: 195px;
              font-size: 12px;
            }
            button {
              cursor: pointer;
              font-size: 16px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 25px;
              width: 85px;
              height: 40px;
              background: #2fc0e0;
              border-radius: 4px;
              box-shadow: 0 0 5px #2fc0e0;
              margin-top: 0;
              margin-left: 42px;
            }
          }
          .canvsBox {
            width: 100%;
            height: 400px;
            margin-left: 20px;
          }
        }
      }
      .color1 {
        td:first-child {
          color: #ffd167;
        }
      }
      .color2 {
        td:first-child {
          color: #e07f2f;
        }
      }
      .color3 {
        td:first-child {
          color: #e68e50;
        }
      }
    }
  }
}
</style>
